<template>
  <div class="data-screen">
    <!-- 头部 -->
    <div class="header">
      <div class="title">Vue Shop Vite 数据大屏</div>
      <div class="time">{{ currentTime }}</div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 数据聚合 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line" />
            数据聚合
          </div>
          <div class="data-list">
            <div class="data-item">
              <span class="label">访问数量</span>
              <span class="value">1210</span>
              <div class="progress-bar">
                <div class="bar" style="width: 80%" />
              </div>
            </div>
            <div class="data-item">
              <span class="label">订单数量</span>
              <span class="value">976</span>
              <div class="progress-bar">
                <div class="bar" style="width: 65%" />
              </div>
            </div>
            <div class="data-item">
              <span class="label">GPT模型数量</span>
              <span class="value">851</span>
              <div class="progress-bar">
                <div class="bar" style="width: 50%" />
              </div>
            </div>
            <div class="data-item">
              <span class="label">Claude模型数</span>
              <span class="value">154</span>
              <div class="progress-bar">
                <div class="bar" style="width: 30%" />
              </div>
            </div>
          </div>
        </div>

        <!-- 人群画像 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line" />
            人群画像
          </div>
          <div class="chart">
            <pie-chart :data="userPortraitData" />
          </div>
        </div>
      </div>

      <!-- 中间面板 -->
      <div class="center-panel">
        <!-- 地图区域 -->
        <div class="map-wrapper">
          <china-map :data="mapData" />
        </div>
        <!-- 数据统计 -->
        <div class="statistics">
          <div class="stat-item">
            <div class="number">2075</div>
            <div class="label">累计访问量</div>
          </div>
          <div class="stat-item">
            <div class="number">1356</div>
            <div class="label">累计用户数</div>
          </div>
          <div class="stat-item">
            <div class="number">1599</div>
            <div class="label">累计产品数</div>
          </div>
          <div class="stat-item">
            <div class="number">2278</div>
            <div class="label">累计模板数</div>
          </div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <!-- 数据散点 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line" />
            数据散点
          </div>
          <div class="chart">
            <scatter-chart :data="scatterData" />
          </div>
        </div>

        <!-- 销售额 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line" />
            销售额
          </div>
          <div class="chart">
            <line-chart :data="salesData" />
          </div>
        </div>

        <!-- 访问量 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line" />
            访问量
          </div>
          <div class="chart">
            <line-chart :data="visitsData" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import PieChart from './components/PieChart.vue'
import ChinaMap from './components/ChinaMap.vue'
import ScatterChart from './components/ScatterChart.vue'
import LineChart from './components/LineChart.vue'

// 当前时间
const currentTime = ref('')
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
}

let timer: number
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})

// 图表数据
const userPortraitData = ref([
  { name: '学生', value: 25 },
  { name: '企业高管', value: 20 },
  { name: '职场人士', value: 30 },
  { name: '家庭主妇', value: 15 },
  { name: '退休人员', value: 10 }
])

const mapData = ref([
  { name: '北京', value: 100 },
  { name: '上海', value: 85 },
  { name: '广州', value: 70 },
  { name: '深圳', value: 65 },
  { name: '杭州', value: 60 }
])

const scatterData = ref([
  [0, 15],
  [0.5, 8],
  [1, 12],
  [1.5, 6],
  [2, 9],
  [2.5, 15],
  [3, 12]
])

const salesData = ref({
  xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
  data: [30, 40, 45, 50, 35, 40]
})

const visitsData = ref({
  xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  data: [1800, 1200, 900, 600, 900, 1500, 1200]
})
</script>

<style lang="less" scoped>
.data-screen {
  width: 100vw;
  height: 100vh;
  background-color: #000638;
  color: #fff;
  overflow: hidden;

  .header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    background: rgba(0, 0, 0, 0.2);

    .title {
      font-size: 20px;
      color: #00f6ff;
    }

    .time {
      font-size: 14px;
      color: #00f6ff;
    }
  }

  .content {
    display: flex;
    padding: 16px;
    height: calc(100vh - 50px);
    gap: 16px;
  }
}

.panel {
  background: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(0, 246, 255, 0.3);
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 4px;

  .panel-header {
    display: flex;
    align-items: center;
    color: #00f6ff;
    font-size: 16px;
    margin-bottom: 16px;

    .line {
      width: 4px;
      height: 16px;
      background: #00f6ff;
      margin-right: 8px;
    }
  }

  .chart {
    height: 220px;
  }
}

.left-panel {
  width: 380px;

  .data-list {
    .data-item {
      margin-bottom: 24px;

      .label {
        display: block;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 8px;
      }

      .value {
        display: block;
        color: #00f6ff;
        font-size: 24px;
        margin-bottom: 8px;
      }

      .progress-bar {
        height: 3px;
        background: rgba(0, 246, 255, 0.1);

        .bar {
          height: 100%;
          background: #00f6ff;
          box-shadow: 0 0 10px rgba(0, 246, 255, 0.5);
        }
      }
    }
  }
}

.center-panel {
  flex: 1;
  min-width: 600px;
  display: flex;
  flex-direction: column;

  .map-wrapper {
    flex: 1;
    min-height: 600px;
  }

  .statistics {
    height: 100px;
    display: flex;
    justify-content: space-between;
    padding: 0 32px;

    .stat-item {
      text-align: center;

      .number {
        font-size: 28px;
        color: #00f6ff;
        margin-bottom: 8px;
      }

      .label {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

.right-panel {
  width: 380px;
}
</style> 
